<template>
  <div id="questionnaireList">
    <h1 class="con-right-title">
      问卷调查活动管理
    </h1>
    <div class="bottom-box">
      <!-- table -->
      <div class="table">
        <!-- 上部搜索条件 -->
        <topSearch :form-inline="formInline"></topSearch>
        <div class="table-conBtn">
          <el-button
            type="warning"
            icon="el-icon-plus"
            @click="handleadd"
          >
            创建活动
          </el-button>
        </div>
        <!-- 表格部分 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" width="60" align="center" label="序号">
            <template slot-scope="scope">
              {{ scope.$index | filterPage(searchParams.pageNum, searchParams.pageSize) }}
            </template>
          </el-table-column>
          <el-table-column prop="id" label="活动ID" width="150" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="changeView('viewDetails')">
                {{
                  scope.row.id
                }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="questionnaireType"
            label="活动展示名称"
            align="center"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="questionnaireName"
            label="题目数量"
            align="center"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="firstStatus"
            label="审核状态"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.firstStatus === 1"
                class="tag-span default"
              >未审核</span>
              <span
                v-else-if="scope.row.firstStatus === 2"
                class="tag-span primary"
              >已通过</span>
              <span
                v-else-if="scope.row.firstStatus === -1"
                class="tag-span warning"
              >未通过</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="secondStatus"
            label="提交状态"
            align="center"
            min-width="100"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.secondStatus === 1"
                style="color: #1dc8a4"
              >已提交</span>
              <span v-else style="color: #000">未提交</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="创建人"
            align="center"
          ></el-table-column>
          <el-table-column
            label="操作"
            prop="secondStatus"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.firstStatus === 1 && scope.row.secondStatus === 1
                "
              >
                <el-button
                  type="text"
                  @click="handelsubmit(scope.row)"
                >
                  提交
                </el-button>
                <el-button
                  type="text"
                  @click="handeledit(scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  type="text"
                  @click="handeldelete(scope.row)"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import topSearch from '@component/behaviorManagement/eventManagement/questionnaire/topSearch' // 上部搜索条件
export default {
  components: {
    topSearch
  },
  data() {
    return {
      // 搜索条件
      formInline: {
        firstStatus: 0, // 一审状态,默认全部
        secondStatus: 0, // 二审状态,默认全部
        questionnaireType: 0, // 活动类型,默认全部
        questionnaireNumber: 0, // 活动编号
        date: '' // 选择的时间
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 表格数据
      tableData: [
        {
          id: 'HD001', // 活动编号
          questionnaireType: '官方征集自评活动', // 活动类型
          questionnaireName: '设计师优秀作品评选活动', // 活动名称
          questionnaireSort: 1, // 活动排序
          questionnaireTime: '2019-08-04 12:20:20-2019-08-05 12:20:20', // 活动时间
          firstStatus: 1, // 一审状态 1未审核 2已通过 -1未通过
          secondStatus: 1, // 二审状态 1未审核 2已通过 -1未通过
          createTime: '2019-08-05 12:20:20' // 创建时间
        },
        {
          id: 'HD001', // 活动编号
          questionnaireType: '官方征集自评活动', // 活动类型
          questionnaireName: '设计师优秀作品评选活动', // 活动名称
          questionnaireSort: 1, // 活动排序
          questionnaireTime: '2019-08-04 12:20:20-2019-08-05 12:20:20', // 活动时间
          firstStatus: 2, // 一审状态 1未审核 2已通过 -1未通过
          secondStatus: 2, // 二审状态 1未审核 2已通过 -1未通过
          createTime: '2019-08-05 12:20:20' // 创建时间
        },
        {
          id: 'HD001', // 活动编号
          questionnaireType: '官方征集自评活动', // 活动类型
          questionnaireName: '设计师优秀作品评选活动', // 活动名称
          questionnaireSort: 1, // 活动排序
          questionnaireTime: '2019-08-04 12:20:20-2019-08-05 12:20:20', // 活动时间
          firstStatus: -1, // 一审状态 1未审核 2已通过 -1未通过
          secondStatus: -1, // 二审状态 1未审核 2已通过 -1未通过
          createTime: '2019-08-05 12:20:20' // 创建时间
        }
      ]
    }
  },
  methods: {
    // 创建活动
    handleadd() {
      this.$router.push({ name: 'addQuestionnaire' })
    },
    // 提交
    handelsubmit() {},
    // 编辑
    handeledit() {},
    // 删除
    handeldelete() {
      this.$confirm('确认删除该条信息吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {})
        .catch(() => {})
    },
    // 跳转详情页
    changeView(name) {
      this.$router.push({ name: name })
    }
  }
}
</script>
<style lang="less" scoped>
.tag-success {
  background: #1dc8a4;
}
</style>
